<template>
  <div class="head2">
    <div class="head_main">
      <div class="head_name">可视化头部标题</div>
      <span class="shadow_line"><i class="moves1a"></i></span>
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {

      }
    }
}
</script>

<style lang="less" scoped>
.head2 { position: relative; width: 1920px; height: 75px; top: 0; left: 50%; transform: translate(-50%, 0); z-index: 20;}
.head2 .head_name {
  padding-top: 5px;
  font-size: 40px;
  background-image: linear-gradient(to bottom, #fff, #d5dcdf);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
.head2 .head_main { position: absolute; width: 1920px; height: 75px; background: url(~@/assets/images/head/head2/logo_con.png) no-repeat; left: 50%; margin-left: -960px; text-align: center;}
.head2 .head_main .shadow_line { position: absolute; height: 100%; width: 600px; left: 50%; margin-left: -200px;}
.head2 .head_main i { display: block; position: absolute; background: url(~@/assets/images/head/head2/logo_con_shadow.png); width: 809px; height: 124px; left: 50%; margin-left: -404px; bottom: 15px;}
.moves1a { animation: 2s linear 0s normal infinite running moves1a;}
@keyframes moves1a {
  0% {
    left: 0%;
    opacity: 0.6;
  }
  30% {
    left: 30%;
    opacity: 1;
  }
  60% {
    left: 60%;
    opacity: 0.6;
  }
  100% {
    left: calc(100% - 90px);
    opacity: 0;
  }
}
</style>